import React, { useEffect, useState } from 'react';

import { useDispatch, useSelector } from 'umi';

import styles from './index.less';

import { Radio, Table } from 'antd';

const ShowUser: React.FC = (props) => {
  const dispatch = useDispatch();
  const { userUser, userIdenttiy, userApi_authority, userIdentity_api_authority_relation, userView_authority, userIdentity_view_authority_relation } = useSelector((state: any) => state.user);
  const user_user = ["用户数据", "身份数据", 'api接口权限', "身份和api接口关系", "视图接口权限", '身份和视图权限关系'];
  const [data, setData] = useState(userUser);

  const [size, setSize] = useState('用户数据');
  const [columns, setcolumns] = useState<any>([{
    title: '用户名',
    dataIndex: 'user_name',
  },
  {
    title: '密码',
    dataIndex: 'user_pwd',
  },
  {
    title: '身份',
    dataIndex: 'identity_text',
  }
  ]);

  useEffect(() => {
    // 展示用户数据
    dispatch({
      type: 'user/getUserShowUserUsers'
    });
    // 展示身份数据
    dispatch({
      type: 'user/getUserIdentitys'
    });
    // 展示api接口权限数据
    dispatch({
      type: 'user/getApi_authoritys'
    });
    // 展示身份和api权限关系
    dispatch({
      type: 'user/getIdentity_api_authority_relations'
    });
    // 获取视图权限数据
    dispatch({
      type: 'user/getView_authoritys'
    });
    // 给身份设定视图权限
    dispatch({
      type: 'user/getIdentity_view_authority_relations'
    });
    // setData(userUser&&userUser)
  }, []);

  const handleSizeChange = (e: string) => {
    setSize(e);
    if (e === "用户数据") {
      setData(userUser);
      setcolumns([{
        title: '用户名',
        dataIndex: 'user_name',
      },
      {
        title: '密码',
        dataIndex: 'user_pwd',
      },
      {
        title: '身份',
        dataIndex: 'identity_text',
      },
      ]);

    };
    if (e === "身份数据") {
      console.log(userIdenttiy);
      setData(userIdenttiy);
      // console.log(data);
      setcolumns([{
        title: '身份名称',
        dataIndex: 'identity_text',
      },
      ]);
    };
    if (e === "api接口权限") {
      console.log(userApi_authority)
      setData(userApi_authority)
      setcolumns([{
        title: 'api权限名称',
        dataIndex: 'api_authority_text',
      },
      {
        title: 'api权限url',
        dataIndex: 'api_authority_url',
      },
      {
        title: 'api权限方法',
        dataIndex: 'api_authority_method',
      },
      ])
    };
    if (e === "身份和api接口关系") {
      console.log(userIdentity_api_authority_relation);
      setData(userIdentity_api_authority_relation)
      setcolumns([{
        title: '身份名称',
        dataIndex: 'identity_text',
      },
      {
        title: 'api权限名称',
        dataIndex: 'api_authority_text',
      },
      {
        title: 'api权限url',
        dataIndex: 'api_authority_url',
      },
      {
        title: 'api权限方法',
        dataIndex: 'api_authority_method',
      },
      ])
    };
    if (e === "视图接口权限") {
      console.log(userView_authority);
      setData(userView_authority);
      setcolumns([{
        title: '视图权限名称',
        dataIndex: 'view_authority_text',
      },
      {
        title: '视图id',
        dataIndex: 'view_id',
      }
      ])
    };
    if (e === "身份和视图权限关系") {
      setData(userIdentity_view_authority_relation);
      console.log(userIdentity_view_authority_relation);
      setcolumns([
        {
          title: '身份',
          dataIndex: 'identity_text',
        },
        {
          title: '视图名称',
          dataIndex: 'view_authority_text',
        },
        {
          title: '视图id',
          dataIndex: 'view_id',
        },
      ])
    };
  };
  return <div className={styles.user_show}>
    <h2 className={styles.h2}>用户展示</h2>
    <div>
      <div>
        <div className={styles.ant_radio_group}>
          <Radio.Group value={size} onChange={(e) => { handleSizeChange(e.target.value) }}>
            {
              user_user.map((i, index) => {
                return <Radio.Button key={index} value={`${i}`}>{i}</Radio.Button>
              })
            }
          </Radio.Group>
        </div>
        <h1 >用户数据</h1>
        <div className={styles.ant_table_wrapper}>
          <Table columns={columns} dataSource={size == '用户数据' ? userUser : data} />
        </div>
      </div>
    </div>
  </div>
};

export default ShowUser;